<template>
  <div class="cateLists">
    <!-- 顶部搜索框 -->
    <div class="search-bar">
      <el-form :inline="true" :model="searchParams" class="demo-form-inline">
        <el-form-item label="关键字">
          <el-input v-model="searchParams.keyWords" placeholder="关键子"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="searchParams.range"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- / 顶部搜索框-->
    <el-button type="primary" @click="cateAddShow=true" style="margin-bottom: 20px;">新增商品分类</el-button>
    <!-- 商品分类列表 -->
    <el-table
      :data="cateLists"
      :height="400"
      style="width: 100%">
      <el-table-column
        prop="cateName"
        label="分类名">
      </el-table-column>
      <el-table-column
        prop="icon"
        label="分类图标"
       >
       <template slot-scope="scope">
          <img :src="scope.row.icon" width="50"/>
       </template>
      </el-table-column>
      <el-table-column
        prop="usable"
        label="是否启动">
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.usable"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0">
          </el-switch>
       </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="showUpdateCate(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="delCate(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- /商品分类列表 -->
    <!-- 分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next, jumper, sizes, total, ->"
      :page-size="pageSize"
      :current-page="page"
      @size-change="pageSizeChange"
      @current-change="currentChange"
      :total="total">
    </el-pagination>
    <!-- /分页组件 -->
    <!-- 新增商品分类弹窗 -->
    <el-drawer
      title="新增商品分类"
      :visible.sync="cateAddShow"
      direction="rtl">
      <cate-add :cates="allCates" @addCate="addCate"/>
    </el-drawer>
    <!-- /新增商品分类弹窗 -->
    <!-- 修改商品分类弹窗 -->
    <el-drawer
      title="修改商品分类"
      :visible.sync="cateUpdateShow"
      direction="rtl">
      <cate-update :_cate="updateCate" @updateCate="doUpdateCate" :cates="allCates"/>
    </el-drawer>
    <!-- /修改商品分类弹窗 -->
  </div>
</template>

<script>
import { getCateLists, addCate, updateCate, delCate } from '_api'
import CateAdd from './components/CateAdd'
import CateUpdate from './components/CateUpdate'
export default {
  name: 'cateLists',
  data () {
    return {
      searchParams: {
        keyWords: '',
        range: []
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      // 所有分类
      cateLists: [],
      total: 0,
      page: 1,
      pageSize: 10,
      cateAddShow: false,
      cateUpdateShow: false,
      allCates: [],
      // 需要修改分类初始值
      updateCate: {}
    }
  },
  methods: {
    delCate (id) {
      // 删除商品分类
      // 弹出确认框
      this.$confirm('此操作会彻底删除该分类，继续吗?', '删除分类')
        .then(() => {
          delCate(id).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: res.data.msg,
                duration: 1500,
                onClose: () => {
                  this.$router.go(0)
                }
              })
            }
          })
        })
    },
    showUpdateCate (cate) {
      // 修改这个分类初始值
      this.updateCate = {
        ...cate
      }
      this.cateUpdateShow = true
    },
    doUpdateCate (cate) {
      // 更新商品分类
      updateCate(cate).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 1500,
            onClose: () => {
              this.$router.go(0)
            }
          })
        }
      })
    },
    addCate (cate) {
      // 新增商品分类
      addCate(cate).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 1500,
            onClose: () => {
              this.$router.go(0)
            }
          })
        }
      })
    },
    currentChange (page) {
      // 分页切换 页码
      this.page = page
      this.getCateLists()
    },
    pageSizeChange (pageSize) {
      // 改变分页一页显示多少条
      this.pageSize = pageSize
      this.getCateLists()
    },
    getCateLists () {
      // 请求所有商品分类
      getCateLists({
        page: this.page,
        pageSize: this.pageSize,
        keyWords: this.searchParams.keyWords,
        start: this.searchParams.range[0],
        end: this.searchParams.range[1]
      }).then(res => {
        if (res.data.code === 200) {
          this.cateLists = res.data.data.lists
          this.total = res.data.data.total
        }
      })
    },
    // 获取所有分类 传递新增和修改分类 作为他们父级分类下拉选项
    getAllCate () {
      getCateLists().then(res => {
        if (res.data.code === 200) {
          this.allCates = res.data.data.lists
        }
      })
    },
    doSearch () {
      this.getCateLists()
      this.searchParams = {
        keyWords: '',
        range: []
      }
    }
  },
  created () {
    this.getCateLists()
    this.getAllCate()
  },
  components: {
    CateAdd,
    CateUpdate
  }
}
</script>

<style lang="scss" scoped>
</style>
